<template>
    <div class="common-layout">
        <el-main>
            <copy-stocks-to-clipboard :data="state.data" />
            <el-table :data="state.data" height="900" 
            @sort-change="sortChange"
            :cell-class-name="tableCellClassName"
            @cell-click="cellClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column prop="date" label="date" width="210" sortable/>
                <el-table-column prop="stock" label="股票" width="140"/>
                <el-table-column prop="display" label="display" width="120">
                    <template #default="scope">
                        <to-d-display :stock="scope.row.stock" :date="scope.row.date"></to-d-display>
                    </template>
                </el-table-column>
                <el-table-column prop="close" label="close" width="100"/>
                <el-table-column prop="pct" label="pct" width="100"/>
                <el-table-column prop="nextPct" label="nextPct" width="100"/>
                <el-table-column prop="gt60d" label="gt60d" width="100"/>
                <el-table-column prop="gt100d" label="gt100d" width="100"/>
                <el-table-column prop="gt300d" label="gt300d" width="100"/>
                <el-table-column prop="duration" label="duration" width="100" sortable />
                <el-table-column prop="d10max" label="d10max" width="100" sortable />
                <el-table-column prop="d10min" label="d10min" width="100" sortable/>
                <el-table-column prop="type" label="type" width="100"/>
            </el-table>
        </el-main>
    </div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue';
import { getMostData } from '../../service/dailyGB';
import CopyStocksToClipboard from '../CopyStocksToClipboard.vue';
import ToDDisplay from '../element/ToDDisplay.vue';
import { useRouteQuery } from '../../utils/useRoute';

const base = "GBStaUp"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"
const selectedKey = base + "Selected"

// 网址传参
const state = reactive({
    data: [],
    rawData: [],
    type: '100d',
    duration: 100,
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || '' , 
        order: sessionStorage.getItem(sortOrderKey) || '' 
    }
})

state.type = useRouteQuery('type', '100d')
state.duration = useRouteQuery('duration', 100)

const loadData = () => {
    getMostData(state.type, state.duration).then( res => {
        state.rawData = res.data
        state.data = res.data
    })
}

loadData()

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (["pct","nextPct","gt60d","gt100d","gt300d"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }

    }
    return ''
}

const cellClick = (row, column, cell, event) => {
    let columnProperty = column.property
    let val = row[columnProperty]
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}
</script>

<style>
</style>